<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/home/css/reset.css">
    <link href="/static/home/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/home/css/flickity.min.css" rel="stylesheet">
    <link href="/static/home/css/css.css" rel="stylesheet">
    <style>
        body {
            background-color: #f5f5f5;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        /*导航条*/
        #header_top {
            height: 50px;
        }

        #header_top_all {
            right: 0px;
            left: 0px;
            width: 1248px;
            height: 50px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            position: fixed;
        }

        .header_ta {
            position: fixed;
            z-index: 9999999999999999999;
            width: 100%;
            height: 50px;
        }

        /* 顶部的左侧导航条 */
        #header_top_left {
            height: 50px;
            display: flex;
        }

        /* 顶部logo */

        #header_top_left_logo {
            margin-top: 9px;
        }

        /* 顶部的左侧导航条中父元素 */

        #header_top_left_title {
            display: flex;
            height: 28px;
            margin-top: 13px;
            margin-left: 8px;
        }

        #header_top_left_title .menu2 {
            width: 24px;
            height: 28px;
            background: url("/static/home/images/menu_sprite.svg") -50px -558px no-repeat;

        }

        /* 顶部的左侧导航条中的链接 */
        #header_top_left_title li {
            list-style: none;
            color: #FFFFFF;
            line-height: 28px;
            margin-right: 25px;
            cursor: pointer;
        }

        .default {
            border-bottom: 1px solid #FFFFFF;
        }

        .menu:hover {
            border-bottom: 1px solid #FFFFFF;
        }

        /* 登陆注册按钮的父元素 */
        #header_top_right {
            height: 50px;
            display: flex;
        }

        .header_top_right {
            border-right: 1px solid #f5f5f5;
            /*width: 46px;*/
            cursor: pointer
        }

        .header_top_right {
            width: 100px;
            height: 30px;
            background-color: #235EA4;
            line-height: 30px;
            text-align: center;
            float: left;
            margin-right: 10px;
            display: inline;
            position: relative;
            cursor: pointer;
        }

        .header_top_right ul {
            position: absolute;
            left: 0;
            top: 30px;
            display: none;
        }

        /* 修改顶部左侧导航栏条中的链接中的··· */
        #header_top_left_title img {
            width: 20px;
            margin-top: 5px;
        }

        .default {
            border-bottom: 1px solid #FFFFFF;
        }

        .menu:hover {
            border-bottom: 1px solid #FFFFFF;
        }

        /* 登陆注册按钮的父元素 */
        #header_top_right {
            height: 50px;
            display: flex;
            width: 144px;
            position: fixed;
            right: 0px;
        }

        /* 顶部两个公共的按钮样式 */
        #header_top_right button {
            width: 50px;
            height: 32px;
            font-size: 15px;
            color: #FFFFFF;
            margin-left: 15px;
            margin-top: 9px;
        }

        /* 登陆按钮 */
        #login {
            background: rgba(201, 0, 0, 0.6);
            border: 0px;
        }

        /* 登陆的悬浮样式 */

        #login:hover {
            background: rgba(201, 0, 0, 0.9);
        }

        #rigister {

            background: rgba(255, 255, 255, 0.1);
            color: #FFFFFF;
            font-size: 15px;
            border: 1px solid #FFFFFF;
        }


        #rigister:hover {
            background: #FFFFFF;
            color: black;
        }

        .search {
            line-height: 50px;
        }

        .search input {
            border-radius: 5px;
            background-color: rgba(96, 96, 96, 0.2);
            text-indent: 1em;
        }

        #username {
            background: rgba(201, 0, 0, 0.6);
            border: 0px;
        }

        /* 登陆的悬浮样式 */
        #username:hover {
            background: rgba(201, 0, 0, 0.9);
        }

        #out {
            text-align: center;
            margin-top: 10px;
            width: 80px;
            height: 29px;
            line-height: 28px;
            margin-left: 20px;
            background: rgba(255, 255, 255, 0.1);
            color: #FFFFFF;
            font-size: 15px;
            border: 1px solid #FFFFFF;
        }

        #out:hover {
            background: #FFFFFF;
            color: black;
        }

        .search {
            line-height: 50px;
        }

        .search input {
            border-radius: 5px;
            background-color: rgba(96, 96, 96, 0.2);
            border: 1px solid #FFFFFF;
            width: 471px;
            height: 33px;
            background: url('/static/home/images/icon_search.svg') no-repeat;
            background-position: 98% center;
            outline: none;
        }

        /*导航条用户头像及操作*/
        .user-head-p {
            position: relative;
            height: 50px;
            width: 50px;
            line-height: 44px;
            border: 1px solid #ddd4d4;
            float: right;
            right: 10px;
        }

        .right-jian {
            background: url('/static/home/images/menu_sprite.svg') 0 -50px no-repeat;
            width: 8px;
            height: 8px;
            position: absolute;
            right: 0;
            bottom: 0;
            display: inline-block;
        }

        .userselect {
            padding: 10px 0;
            top: 49px;
            right: -1px;
            background-color: #fff;
            position: absolute;
            background: #fff;
            width: 180px;
            text-align: left;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
            overflow: hidden;
            font-size: 14px;
            color: #221919;
            display: none;
        }

        .userselect div:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }

        .user-head-p:hover .userselect {
            display: block;
        }

        .userselect div a {
            display: inline-block;
            text-decoration: none;
            padding-left: 20px;
            height: 38px;
            line-height: 38px;
            text-align: left;
            font-weight: 400;
            position: relative;
            color: #222;
        }

        .userselect div i {
            display: block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 15px;
        }

        .userselect div span {
            margin-left: 10px;
        }

        /*导航条用户头像及操作*/

        /*导航下面的广告*/
        .gg {
            position: relative;
        }

        .close {
            background: url('/static/home/images/close.png') left top no-repeat;
            z-index: 99996;
            display: block;
            cursor: pointer;
            position: absolute;
            display: block;
            width: 30px;
            height: 30px;
            /*background-color: #999;*/
            right: 0;
            top: 0;
        }

        .close:hover {
            background-color: #444;
        }

        /*导航下面的广告*/
        /*个人信息画板 采集*/
        .sb {
            height: 60px;
            width: 100%;
            background-color: #f5f5f5;
            s
        }

        .user-label {
            position: relative;
            background-color: #fff;
        }

        .user-label-top {
            height: 170px;
            border-bottom: 1px #e3dfdf solid;
        }

        .user-label-facus {
            width: 140px;
        }

        .user-label-facus a {
            float: left;
            text-align: center;
            width: 50%;
            background-color: #f5f5f5;
            color: #444;
            text-decoration: none;
        }

        .user-label-facus a:first-child {
            border-right: 1px #dbd6d6 solid;
        }

        .user-label-facus a:hover span {
            color: #c90000;
        }

        .user-label-facus a:hover p {
            color: #c90000;
        }

        .user-label-facus a span {
            font-weight: 800;
        }

        .user-label-facus a p {
            font-size: 13px;
            color: #999;
        }

        .user-label-head strong {
            position: absolute;
            top: 52px;
            left: 158px;
            font-size: 24px;
            font-weight: 700;
            color: #444;
            display: inline-block;
        }

        .user-label-head {
            position: absolute;
            left: 20px;
            top: -50px;
        }

        .user-label-head button {
            border: none;
            background-color: #c0acac;
            text-align: center;
            padding: 3px;
            border-radius: 3px;
            position: absolute;
            left: 41px;
            top: 98px;
            font-size: 13px;
            display: none;
        }

        .user-label-head button:hover {
            background-color: #9b9b9b;
        }

        .user-label-head .user-label-h:hover button {
            display: block;
        }

        .user-label-head .user-label-h img {
            border: 5px solid #fff;
            border-radius: 3px;
        }

        .user-label-set {
            float: right;
            padding: 20px;
        }

        .user-label-set a {
            display: inline-block;
            border-radius: 2px;
            padding: 0 12px;
            height: 28px;
            line-height: 33px;
            background: #ededed;
            border: 1px solid #ededed;
            cursor: pointer;
            text-decoration: none;
            color: #444;
        }

        .user-label-set a:hover {
            background: #bababa;
        }

        .user-label-set a .icon-set {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-image: url('/static/home/test/ic-setting.svg');
            background-repeat: no-repeat;
        }

        .user-label-bl {
            float: left;
        }

        .user-label-bottom .user-label-bl ul li {
            float: left;
        }

        .user-label-bottom {
            padding-left: 20px;
            background-color: #fff;
            height: 48px;
            line-height: 48px;
        }

        .clearfloat:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearfloat {
            zoom: 1
        }

        .user-label-bottom .user-label-bl ul li a {
            text-decoration: none;
            color: #999;

        }

        .user-label-bottom .user-label-bl ul li:first-child a {
            font-weight: 700;
            color: #000;
        }

        .user-label-bottom .user-label-bl ul li a:hover {
            color: #9A0000;
        }

        .user-label-bottom .user-label-bl ul li:first-child ~ li {
            margin-left: 50px;
        }

        .user-label-br {
            float: right;
            margin-right: 50px;
            position: relative;
        }

        .user-label-br input {
            background: #fff;
            color: #999;
            height: 31px;
            border: 1px #ddd solid;
            outline: none;
            width: 226px;
            text-indent: 1em;
        }

        .user-label-bottom .user-label-br a {
            display: block;
            width: 32px;
            height: 32px;
            background: url('/static/home/images/menu_sprite.svg') 5px -93px no-repeat;
            cursor: pointer;
            position: absolute;
            right: 0px;
            top: 7px;
        }

        .user-label-br .user-label-style {
            position: absolute;
            right: 255px;
            top: 8px;
            box-sizing: border-box;
            border: 1px solid #ededed;
            border-radius: 2px;
            width: 62px;
            height: 32px;
            background-color: #fff;
        }

        .user-label-br .user-label-style .user-label-sl {
            display: inline-block;
            width: 30px;
            height: 30px;
            cursor: pointer;
            background-image: url('/static/home/test/ic-view-boardview.svg');
            background-repeat: no-repeat;
            background-position: center center;
            float: left;
        }

        .user-label-br .user-label-style .user-label-sr {
            display: inline-block;
            width: 30px;
            height: 30px;
            cursor: pointer;
            background-image: url('/static/home/test/ic-view-listview.svg');
            background-repeat: no-repeat;
            background-position: center center;
        }

        /*画板样式 大框*/
        .photo-al2 {
            width: 100%;
            padding-bottom: 200px;
            /*display: none;*/
        }

        .photo-tsty2 {
            margin-top: 15px;
            margin-left: 15px;
            width: 236px;
            height: 350px;
            background-color: #efefef;
            border-radius: 3px;
            -webkit-transition: box-shadow .5s, transform .5s, background-position .5s;
            cursor: pointer;
            position: relative;
        }

        .photo-tsty2:hover {
            box-shadow: 0px 4px 10px #999999;
            background: rgba(255, 255, 255, .5);
            transform: translate(0, -2px);
        }


        .photo-tsty2 .photo-x {
            width: 210px;
            height: 324px;
            border: 2px dashed #dedede;
            position: absolute;
            top: 13px;
            left: 13px;
        }

        .photo-tsty2 .photo-x i {
            display: block;
            width: 48px;
            height: 48px;
            background-image: url('/static/home/test/icon_add_rbig.png');
            background-repeat: no-repeat;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .photo-tsty2:hover i {
            background-position: center center;
        }


        .photo-as {
            background-color: #fff;
        }

        .photo-as {
            position: relative;
        }

        .photo-as .photo-pic {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 216px;
            height: 289px;
        }

        .photo-as .photo-pic .photo-pic-top {
            width: 216px;
            height: 216px;
            overflow: hidden;
            border: 1px #dbd4d4 solid;
        }

        .photo-as .photo-pic .photo-pic-top img {
            max-width: 100%;
        }

        .photo-as .photo-pic .photo-pic-top span {
            display: inline-block;
            color: #999;
            font-weight: 700;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .photo-as .photo-pic .photo-pic-top .number {
            position: absolute;
            top: 188px;
            left: 8px;
            font-size: 12px;
            color: #fff;
            height: 20px;
            line-height: 20px;
            padding: 0 5px;
            background: rgba(0, 0, 0, .4);
            border-radius: 2px;
        }

        .photo-as .photo-pic .photo-pic-top .setface {
            border: none;
            position: absolute;
            top: 176px;
            right: 6px;
            background-color: #ededed;
            text-align: center;
            border-radius: 2px;
            font-size: 13px;
            padding: 0 10px;
            height: 24px;
            line-height: 24px;
            margin-top: 10px;
            outline: none;
            display: none;
        }

        .photo-as .photo-pic .photo-pic-top:hover .setface {
            display: block;
        }

        .photo-as .photo-pic .photo-pic-top .setface:hover {
            background-color: #d8d8d8;
        }


        .photo-as .photo-pic .photo-pic-bottom a {
            float: left;
            width: 69px;
            height: 69px;
            overflow: hidden;
            margin: 3px 3px 3px 0;
            border: 1px #dbd4d4 solid;
        }

        .photo-as .photo-pic .photo-pic-bottom img {
            max-width: 100%;
        }

        .photo-as .photo-pic .photo-pic-bottom img:last-child {
            margin: 0;
        }

        .photo-as .photo-pic .photo-edit button {
            border: none;
            background-color: #ededed;
            text-align: center;
            border-radius: 2px;
            font-size: 14px;
            padding: 0 12px;
            height: 28px;
            line-height: 28px;
            width: 215px;
            margin-top: 10px;
            outline: none;
        }

        .photo-as .photo-pic .photo-edit button:hover {
            background-color: #d8d8d8;
        }

        /*大框*/

        /*画板编辑模态框样式*/
        #excel {
            width: 700px;
            margin: 60px auto;
            margin-bottom: 0;

        }

        .modal-open .modal {
            overflow: hidden;
        }

        .form-horizontal input {
            /*width: 400px;*/
        }

        .form-horizontal textarea {
            /*width: 400px;*/
            resize: none;
        }

        /*底部(没有更多了)*/
        .footer {
            margin-bottom: 15px;
            padding: 15px 0;
            text-align: center;
            font-weight: 700;
            border: double rgba(34, 25, 25, .14);
            border-width: 3px 0 0 0;
        }

        /*设置封面样式插件+模态框样式*/
        .carousel {
            width: 660px;
            height: 216px;
            margin: 0 auto;

        }


        .carousel-cell {
            width: 216px;
            height: 216px;
            overflow: hidden;
            margin-right: 10px;

        }

        .carousel-cell img {
            max-width: 100%;
        }

        .flickity-page-dots {
            display: none;
        }

        /*左箭头*/
        .flickity-prev-next-button.next {
            right: 65px;
        }

        .flickity-prev-next-button.next {
            top: 50%;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            transform: translateY(-50%);
        }

        /*右箭头*/
        .flickity-prev-next-button.previous {
            left: 65px;
        }

        .flickity-prev-next-button {
            top: 50%;
            width: 88px;
            height: 88px;
            border-radius: 50%;
            transform: translateY(-50%)
        }

        /*箭头背景*/
        .flickity-button {
            position: absolute;
            background: hsla(0, 0%, 77%, 0.75);
            border: none;
            color: #333;
        }


        /*模态框*/
        #dialog {
            width: 750px;
        }


    </style>
</head>
<body>
<div id="header_top">
    <div class="header_ta">
        <div id="header_top_all">
            <!-- 导航 -->
            <div id="header_top_left">
                   <!-- 顶部导航条 -->
                <div id="header_top_left_logo">
                    <img src="/static/home/images/logo_wt.svg">
                </div>
                                <!-- 六个超链接 -->
                <ul id="header_top_left_title">
                    <li class="default"><a href="{:url('home/index/loadIndex')}">首页</a></li>
                    <li class="menu"><a href="">最新</a></li>
                    <li class="menu"><a href="">美思</a></li>
                    <li class="menu"><a href="">活动</a></li>
                    <li class="menu"><a href="">教育</a></li>
                    <li class="menu menu2"></li>
                </ul>
                <div class="search">
                    <input type="text">
                </div>
            </div>
        </div>
        {if condition="$Think.session.name eq true"}
        <div class="user-headr">
            <div class="user-head-p text-center">
                <a href="{:url('home/UserPhoto/index')}"><img src="/static/home/test/tx1.jfif" width="26"
                                                              height="26"></a>
                <span class="right-jian"></span>

                <div class="userselect">
                    <div><span class="glyphicon glyphicon-user"></span><a href="">我的画板</a></div>
                    <div><span class="glyphicon glyphicon-search"></span><a href="">查找好友</a></div>
                    <div><span class="glyphicon glyphicon-heart"></span><a href="">我的关注</a></div>
                    <div><span class="glyphicon glyphicon-cog"></span><a href="">账号设置</a></div>
                    <div><span class="glyphicon glyphicon-log-in"></span><a href="{:url('home/index/loginout')}">退出</a>
                    </div>
                </div>
            </div>

        </div>
        <!--                <button id="username" style="width:80px">{$Think.session.name['name']}</button>-->
        <!--                <a href="{:url('home/index/loginout')}" id="out">退出</a>-->
        {else}
        <div id="header_top_right" class="">
            <button id="login" data-toggle="modal" data-target="#hiModal">登录</button>
            <button id="rigister" data-toggle="modal" data-target="#myModal">注册</button>
        </div>
        {/if}
    </div>
</div>
<!--导航下面的广告-->
<div class="gg">
    <div class="close"></div>
    <img src="/static/home/images/gg.png" width="100%">
</div>
<div class="sb"></div>
<!--用户头像,关注,采集,喜欢,标签超链接-->
<div class="container-fluid">
    <div class="user-label">
        <div class="user-label-top">
            <div class="user-label-head">
                <div class="user-label-h">
                    <img src="/static/home/test/tx1.jfif" width="145" height="145">
                    <button>更换头像</button>
                </div>
                <strong>NameisNull</strong>
                <div class="user-label-facus">
                    <a href="#" class="user-label-facus-l">
                        <span>0</span>
                        <p>粉丝</p>
                    </a>
                    <a href="#" class="user-label-facus-r">
                        <span>0</span>
                        <p>关注</p>
                    </a>
                </div>
            </div>
            <div class="user-label-set">
                <a href="#"><i class="icon-set"></i></a>
            </div>
        </div>
    </div>
    <div class="user-label-bottom">
        <div class="user-label-bl">
            <ul class="clearfloat">
                <li><a href="{:url('home/userphoto/index')}"><span>2 </span>画板</a></li>
                <li><a href="{:url('home/userphoto/piclist')}"><span>2 </span>采集</a></li>
                <li><a href="{:url('home/userphoto/mylike')}"><span>2 </span>喜欢</a></li>
                <li><a href=""><span>2 </span>标签</a></li>
            </ul>
        </div>
        <div class="user-label-br">
            <div class="user-label-style">
                <div class="user-label-sl"></div>
                <div class="user-label-sr"></div>
            </div>
            <input type="text" placeholder="搜索我的采集">
            <a href=""></a>
        </div>
    </div>
</div>

{block name="addpic"}
<!--画板默认列表-->
<div class="photo-al2">
    <div class="photo-tsty2" data-toggle="modal" data-target="#myModal_2">
        <div class="photo-x">
            <i></i>
        </div>
    </div>
</div>

<!--画板编辑模态框-->
<div class="modal fade" id="excel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">编辑画板</h4>
            </div>

            <form class="form-horizontal">
                <div class="form-group mt20">
                    <label for="inputEmail3" class="col-sm-2 control-label">标题</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="inputEmail3" placeholder="为你的画板起个名字">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">画板简介</label>
                    <div class="col-sm-8">
                        <textarea class="form-control" rows="3" placeholder="画板简介最多225个字"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">分类</label>
                    <div class="col-sm-8">
                        <select class="form-control">
                            {volist name="category" id="v"}
                            <option value="">{$v['category_name']}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="form-group mt20">
                    <label for="inputEmail3" class="col-sm-2 control-label">封面</label>
                    <div class="col-sm-8">
                        <button class="btn btn-default">修改</button>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-default pull-left">删除画板</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <input type="submit" class="btn btn-primary" value="确认">
                </div>
            </form>
        </div>
    </div>
</div>

<!--添加画板模态框-->
<div class="modal fade mt50" id="myModal_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    新建画板
                </h4>
            </div>
            <div class="modal-body" style="width: 550px; margin: 0px auto;">
                <input type="text" class="form-control" placeholder="画板标题, 不能超过32个字符">
                <select class="form-control mt20">
                    {volist name="category" id="v"}
                    <option value="">{$v['category_name']}</option>
                    {/volist}
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-danger" id="input-button" onclick="setUserGold()">
                    创建画板 <!--成功的按钮-->
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--设置封面模态框-->
<div class="modal fade mt50" id="myModal_3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" id="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title">
                    设置封面(画板名)
                </h4>
            </div>
            <div class="modal-body" style="width: 750px; margin: 0px auto;">
                <div class="carousel">
                    {for start="0" end="15"}
                    <div class="carousel-cell">
                        <div class="bgc"></div>
                        <img src="/static/home/test/01c42c37c676b6d621dc4401662f9e4f59437bfa9de1c-88rSRR_fw658.jfif">
                    </div>
                    {/for}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-danger">
                    保存设置 <!--成功的按钮-->
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


{/block}
<!--底部(没有更多了)-->
<div class="container-fluid footer">
    <img src="/static/home/test/end.png">
</div>
<script src="/static/home/js/jquery.min.js"></script>
<script src="/static/home/js/bootstrap.min.js"></script>
<script src="/static/home/js/masonry.pkgd.min.js"></script>
<script src="/static/home/js/imagesloaded.js"></script>
<script src="/static/home/js/flickity.pkgd.min.js"></script>
<script src="/static/home/js/tagsinput.js"></script>


{block name="tupian"}
<script>
    $('#header_top_left_title li a').css({'color': 'black'});
    $('.header_ta').css({'background': '#fff'});
    $('#header_top_left_logo img').attr('src', '/static/home/images/logo.svg');
    $('#header_top_left_title .menu2').css({'background': 'url("/static/home/images/menu_sprite.svg") 0 -248px no-repeat;'});
    $('.search input').css({'background-color': 'rgba(96, 96, 96, 0.2)', 'border': '1px solid #000'});
    $('#rigister').css({'background-color': '#d9d9d9', 'color': '#444'});

    $(function () {
        // 瀑布流初始化
        var $container = $('.photo-al2');
        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.photo-tsty2',
                columnWidth: '.photo-tsty2',
                isResizeBound: true,
                isAnimated: true
            });
        });

        // 设置封面初始化
        var $carousel = $('.carousel').flickity()
            .flickity('next')
            .flickity('select', 4);
    });


    var dataInt = {
        'data': [
            {'src': '01c42c37c676b6d621dc4401662f9e4f59437bfa9de1c-88rSRR_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1d6781569238b14290ab5fb8094e3e0b143de28524b07-L9kIQR_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'}
        ]
    }

    // 判断首次进入页面应该显示的视图样式
    myphoto();

    function myphoto() {
        for (var i = 0; i < dataInt['data'].length; i++) {
            var $photopic =
                '<div class="photo-tsty2 photo-as">' +
                '<div class="photo-pic">' +
                '<div class="photo-pic-top">' +
                '<a href="#"><img src="' + '/static/home/test/' + dataInt.data[i]['src'] + '"></a>' +
                '<span>画板标题</span>' +
                '<div class="number">22</div>' +
                '<button class="setface" data-toggle="modal" data-target="#myModal_3">设置封面</button>' +
                '</div>' +
                '<div class="photo-pic-bottom">' +
                '<a href="#"><img src="' + '/static/home/test/' + dataInt.data[i]['src'] + '"></a>' +
                '<a href="#"><img src="' + '/static/home/test/' + dataInt.data[i]['src'] + '"></a>' +
                '<a href="#"></a>' +
                '</div>' +
                '<div class="photo-edit">' +
                '<button class="edit-p btn " data-toggle="modal" data-target="#excel">编辑</button>' +
                '</div>' +
                '</div>' +
                '</div>';

            $('.photo-al2').append($photopic);
        }


        // 画板
        var $grid = $('.photo-al2').masonry({
            itemSelector: '.photo-tsty2',
            columnWidth: '.photo-tsty2',
            percentPosition: true,
        });
        $grid.imagesLoaded().progress(function () {
            $grid.masonry('layout');
        });
    };


</script>
{/block}
</body>
</html>